<template>
  <div class="cpk-chart">
    <el-row :gutter="20">
      <el-col :span="24">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import ChartView from '@/components/chart/index.vue';
// import { Descriptions } from 'element-ui'
// Vue.use(Descriptions);
export default {
    name: 'cpkChart',
    components: {
        ChartView
    },
    data() {
        return {
            chartOpt: {
                legend: {
                    // 图例的数据数组。
                    data: ['Evaporation']
                },
                tooltip: {
                    // 触发类型
                    trigger: 'axis',
                    // 是配置坐标轴指示器的快捷方式
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        name: 'Evaporation',
                        type: 'line'
                    }
                ]
            },
            // 配置列表
            optionList: []
        }
    },

    methods: {
        init() {

        },
        getParam(low, mean, up, top, lsl, usl) {
            const res = {};
            res['low'] = this.getFloat(low);
            res['mean'] = this.getFloat(mean);
            res['up'] = this.getFloat(up);
            res['top'] = this.getFloat(top);
            res['lsl'] = this.getFloat(lsl);
            res['usl'] = this.getFloat(usl);
            return res;
        },
        getFloat(numbers, digit = 3) {
            return (numbers.toFixed(digit) / 1).toString();
        },
        getData() {
            // let index = 0
            // this.setEchartsList("ppk");
            // if (this.tabInfo["ppk"]) {
            //     return
            // } else {
            //     this.tabInfo["ppk"] = true;
            // }

            const spcQueryParam = this.$parent.getQueryParameter();
            this.httpService.post(Config.API_URL.SPC.GET_SPC_CPK_TREND_DATA_URL, spcQueryParam,
                (successful, dataSet, res) => {
                    if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                        const spcStatisticsResults = _.get(dataSet, 'data', [])
                        for (let i = 0; i < spcStatisticsResults.length; i++) {
                            const spcStatisticsResult = spcStatisticsResults[i];
                            const title = _.get(spcStatisticsResult, 'reportName', '')

                            const cl = _.get(spcStatisticsResult, 'standardValue', '')

                            const ppkTarget = _.get(spcStatisticsResult, 'ppkTrendContrastResult.cpkTrendResults[0].ppkTarget', 0)
                            // const dateListPPK = _.get(spcStatisticsResult, 'cpkTrendResult.dateArray', [])
                            // const dataListPPK = _.get(spcStatisticsResult, 'cpkTrendResult.cpkArray', [])

                            const ppkTrendContrastResult = _.get(spcStatisticsResult, 'ppkTrendContrastResult', 0)

                            const ppkDatas = {

                                standardValue: cl,
                                title: title,
                                ppkTrendContrastResult: ppkTrendContrastResult,
                                ppkTarget: ppkTarget
                            }

                            // this.ppkDatas.push('data')
                            setTimeout(() => {
                                this.optionList.push(this.getPPKTrendOption(ppkDatas))
                                // this.showPPkTrendChart(ppkDatas, i)
                            }, 50);
                        }

                    } else {
                        toastr.error(
                            dataSet.messageCode ? this.translate.instant(dataSet.messageCode, { value: this.translate.instant('PART') })
                                : dataSet.message);
                    }
                },
                (successful, msg, err) => {
                    toastr.error(msg);
                }
            );

        },
        showPPkTrendChart(data, i) {
            this.Echarts.ppkTrendChart[i] = echarts.init(document.getElementById(`PPKTrendChart-${i}`));
            this.Echarts.ppkTrendChart[i].setOption(EchartsClass.getPPKTrendOption(data));
            // this.Echarts.ppkTrendChart[i].on('click', (params) => {
            //     const option = this.Echarts.ppkTrendChart[i].getOption()
            //     const lineCode = option.title[0].text.split('_')[0]
            //     const itemName = option.title[0].text.split(' ')[1]
            //     if (params.value < data.ppkTarget) {
            //         // CPKANALYSI：CPK分析图
            //         // CPKTREND：CPK趋势图
            //         // NORMALTEST：正态检验图
            //         // YIELD：良率趋势图
            //         // SCATTER：散点图
            //         // const record = {
            //         //     type: 'CPKTREND',
            //         //     manufactureDate: params.name,
            //         //     partNo: this.model.partNo,
            //         //     lineCode: lineCode,
            //         //     parameterName: itemName,
            //         // }
            //         // this.spcRecord = record
            //         // this.getAbnormalReasonDetail(record)
            //         // $('#abnormalReasonModal').modal('show');
            //         window.open('/#/spc/report?partNo=' + encodeURIComponent(this.model.partNo)
            //             + '&type=CPK' + '&item=' + encodeURIComponent(params.seriesName)
            //             + '&manufactureDate=' + params.name
            //             + "&lineCode=" + encodeURIComponent(lineCode), "_blank")
            //     }
            // })
        },
        getPPKTrendOption(data) {
            var ppkTrendContrastResult = data.ppkTrendContrastResult;
            const ppkDate = _.get(data, 'ppkTrendContrastResult.cpkTrendResults[0].dateArray', [])
            const cpkTrendResults = _.get(data, 'ppkTrendContrastResult.cpkTrendResults', [])
            var titles = [];
            for (var i = 0; i < cpkTrendResults.length; i++) {
                titles.push(cpkTrendResults[i].name);
            }
            const option = {
                title: {
                    show: true,
                    text: data.title,
                },
                legend: {
                    data: titles,
                    orient: 'vertical',
                    right: 10,
                    top: 'middle'
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ppkDate
                },
                yAxis: {
                    type: 'value',
                },
                series: [

                ],
                // dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        start: 0,
                        end: 10,
                        minValueSpan: 10
                    },
                    {
                        show: true,
                        type: 'slider',
                        bottom: 10,
                        start: 98,
                        end: 100,
                        minValueSpan: 10
                    }
                ]
            };


            for (let i = 0; i < ppkTrendContrastResult.cpkTrendResults.length; i++) {
                const seriesItem = {
                    data: ppkTrendContrastResult.cpkTrendResults[i].cpkArray,
                    name: ppkTrendContrastResult.cpkTrendResults[i].name,
                    type: 'line',
                    // color: '#30d3ff',
                    animation: false,
                    itemStyle: {
                        width: 2,
                        color: (params) => {
                            if (params.value < data.ppkTarget) {
                                return '#ff6664';
                            } else {
                                return '#30d3ff';
                            }
                        },
                    },
                    symbol: (value) => {
                        if (value < data.ppkTarget) {
                            return 'circle';
                        } else {
                            return 'circle';
                        }
                    },
                    symbolSize: (value) => {
                        if (value < data.ppkTarget) {
                            return '8';
                        } else {
                            return '8';
                        }
                    },
                    label: {
                        show: true,
                        position: 'left',
                        distance: 5,
                    }, tooltip: { // 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                        formatter: function (param) {
                            return [
                                'Item: ' + ppkTrendContrastResult.cpkTrendResults[i].name,
                                'Date: ' + param.name,
                                'PPK: ' + param.value,
                            ].join('<br/>')
                        }
                    }
                }


                option.series.push(seriesItem);
            }

            option.series.push({
                type: 'line',
                silent: true,
                animation: false,
                markLine: {
                    symbol: ['none'], // 去掉箭头
                    lineStyle: {
                        width: 1,
                        // type: 'solid',  //'dotted'虚线 'solid'实线
                        color: '#ff6664',
                    },
                    // data: [{ name: 'USL', yAxis: usl }, { name: 'CL', yAxis: cl }, { name: 'LSL', yAxis: lsl }],
                    data: [{ name: 'ppk目标值', yAxis: data.ppkTarget }],
                    label: {
                        color: '#ff6664',
                    }
                }
            });
            return option
        }

    }
}
</script>

<style lang="scss" scoped>
.cpk-chart {
  .table {
    margin-bottom: 10px;

    // 滚动条默认宽度是16px 将thead的宽度减16px
    thead {
      width: calc(100% - 1em);
    }

    tbody {
      border: 1px solid #ddd;
      border-bottom: none;

      tr {
        border-bottom: 1px solid #ddd;

        td {
          border-right: 1px solid #ddd;
        }

        .last-cell {
          border-right: none;
        }
      }

      tr:nth-child(even) {
        background: #fbfce5 !important;
      }

      .text-blue {
        color: #5379de;
      }

      .width-label {
        width: 104px;
      }
    }
  }
}
</style>